import { Link } from 'react-router-dom';
import { HeadphonesIcon, MonitorIcon, CpuIcon, SmartphoneIcon } from 'lucide-react';
const CategoryNavigation = () => {
  const categories = [{
    id: 'audio',
    name: 'Audio Sanctuary',
    description: 'Headphones, speakers, DACs and everything audio',
    icon: <HeadphonesIcon size={40} className="text-[#4361ee] mb-4" />,
    path: '/reviews?category=audio',
    gradient: 'from-[#4361ee]/20 to-transparent'
  }, {
    id: 'visual',
    name: 'Visual Frontier',
    description: 'Monitors, TVs, projectors and display tech',
    icon: <MonitorIcon size={40} className="text-[#06d6a0] mb-4" />,
    path: '/reviews?category=visual',
    gradient: 'from-[#06d6a0]/20 to-transparent'
  }, {
    id: 'compute',
    name: 'Compute Core',
    description: 'CPUs, GPUs, laptops and desktops',
    icon: <CpuIcon size={40} className="text-[#4361ee] mb-4" />,
    path: '/reviews?category=compute',
    gradient: 'from-[#4361ee]/20 to-transparent'
  }, {
    id: 'mobile',
    name: 'Mobile Nexus',
    description: 'Smartphones, tablets and wearables',
    icon: <SmartphoneIcon size={40} className="text-[#06d6a0] mb-4" />,
    path: '/reviews?category=mobile',
    gradient: 'from-[#06d6a0]/20 to-transparent'
  }];
  return <div className="py-16">
      <h2 className="text-2xl md:text-3xl font-bold font-display mb-10 text-center">
        Explore Our Tech Universe
      </h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        {categories.map(category => <Link key={category.id} to={category.path} className="card p-6 transition-all hover:transform hover:-translate-y-1 hover:shadow-lg hover:shadow-[#4361ee]/10 group">
            <div className={`rounded-full w-16 h-16 flex items-center justify-center bg-gradient-to-br ${category.gradient} mb-4`}>
              {category.icon}
            </div>
            <h3 className="text-xl font-bold font-display mb-2 group-hover:text-[#4361ee] transition-colors">
              {category.name}
            </h3>
            <p className="text-[#8a8f98] text-sm">{category.description}</p>
          </Link>)}
      </div>
    </div>;
};
export default CategoryNavigation;